<template>
    <div v-for="(v, index) in model" class="destination-outer">
        <el-input v-model="v.address" type="textarea" :rows="1" class="destination-input" :disabled="props.disabled" />
        <template v-if="!props.disabled">
            <el-tooltip class="box-item" effect="dark" content="新增目的地" placement="bottom" v-if="index < 2">
                <el-icon class="tool-btn" @click="addDestination">
                    <CirclePlus />
                </el-icon>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除目的地" placement="bottom" v-if="index > 0">
                <el-icon class="tool-btn" @click="deleteDestination(index)">
                    <CloseBold />
                </el-icon>
            </el-tooltip>
        </template>
    </div>
</template>
<script setup lang='ts'>
import { Ref } from "vue";
const model: Ref<{ address: string, name?: string }[]> = defineModel();
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false,
    }
});
// if (model.value == undefined || model.value == null) model.value = [{ address: "" }];
const addDestination = () => {
    model.value.push({ address: "" })
}
const deleteDestination = (index) => {
    model.value.splice(index, 1)
}
</script>
<style lang='scss' scoped>
.destination-outer {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;

    &:last-of-type {
        margin-bottom: 0;
    }
}

.tool-btn {
    cursor: pointer;
    margin-left: 8px;

}

.destination-input {
    width: calc(100% - 60px);
}
</style>